<template>
  <view class="root">
    <view class="box">
      <imageViewer :url="url" />
    </view>
    <view class="common_btn_box">
      <view class="btn" @click="toChange(true)" hover-class="is_hover"
        >Pre</view
      >
      <view class="btn" @click="toChange(false)" hover-class="is_hover"
        >Next</view
      >
    </view>
    <view class="common_btn_box">
      <view hover-class="is_hover" class="btn" @click="toDownload"
        >Download
      </view>
      <view hover-class="is_hover" class="btn" @click="toReturn">Return</view>
    </view>
  </view>
</template>

<script>
import imageViewer from "./imageViewer.vue";
export default {
  components: { imageViewer },
  props: {
    url: {
      type: String,
      default: "https://static-cse.canva.cn/blob/229868/.jpg",
    },
  },
  watch: {
    url() {
      this.scale = 1;
    },
  },
  data() {
    return {
      imgStyle: "",
    };
  },
  methods: {
    changeStyle() {
      this.imgStyle = `width: ${(1 + 0.5 * this.scale) * 100}%`;
      this.scale += 1;
    },
    toChange(isPre) {
      this.$emit("change", isPre);
    },
    toReturn() {
      this.$emit("return");
    },
    toDownload() {
      uni.downloadFile({
        url: this.url,
        success: (downloadResult) => {
          if (downloadResult.statusCode === 200) {
            // 下载成功，保存到相册
            uni.saveImageToPhotosAlbum({
              filePath: downloadResult.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                });
              },
              fail: (err) => {
                console.error("保存失败:", err);
                uni.showToast({
                  title: "保存失败",
                  icon: "none",
                });
              },
            });
          } else {
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("下载失败:", err);
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="scss" scoped>
.root {
  height: 100vh;
  background: black;

  .box {
    height: calc(100% - 88rpx - 88rpx);
    width: 100%;
    overflow: hidden;
    overflow-x: hidden;
  }
}
</style>